<script setup>
import Nav from "./components/Nav/index.vue"
import Header from "./components/Header/index.vue"
import LayoutMain from "./components/LayoutMain/index.vue"
import Breadcrumb from "./components/Breadcrumb/Breadcrumb.vue"
import { useSettingStore } from "@/stores/setting"
const useSetting = useSettingStore();

</script>
<template>
    <div class="layout-container">
        <div class="layout-menu-container">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="">
                <span>南通华灿科技</span>
            </div>
            <Nav />
        </div>
        <div class="layout-right-container">
            <div class="layout-head-container">
                <Header />
            </div>
            <div class="breadcrumb">
                <Breadcrumb/>
            </div>
            <div class="layout-main-container">
                <LayoutMain />
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.layout-container {
    position: relative;
    overflow: hidden;
    display: flex;

    .layout-menu-container {
        width: $layout-menu-width;
        height: 100vh;
        overflow: hidden;
        background: var(--fff-141414-color);

        .logo {
            width: 100%;
            height: $header-height;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                display: block;
                height: 30px;
            }
            span{
                font-weight: 600;
                letter-spacing: 2px;
                font-size: 18px;
            }
        }
    }

    .layout-right-container{
        position: absolute;
        top: 0;
        left:$layout-menu-width ;
        width: calc(100vw - $layout-menu-width);
        height: 100vh;
        overflow: hidden;

        .layout-head-container {
            width: calc(100vw - $layout-menu-width);
            height: $header-height;
            background: var(--fff-141414-color);
        }

        .layout-main-container {
            position: relative;
            width: calc(100vw - $layout-menu-width);
            height: calc(100vh - $header-height - $bread-height);
            background: var(--grey-2);
            padding: 10px;
            min-width: 996px;
            overflow: hidden;
            overflow-y:auto;
        }
        .layout-main{
            position: relative;
        }

    }
}</style>